<!-- 创作中心 -->
<template>
	<view class="create-center-page">
		<image class="header-img" src="/static/cloud/create-bj.png"></image>
		<!-- 素材中心/任务管理 -->
		<view class="display-a-js admin-cls">
			<block v-for="(i, j) in typeList" :key="j">
				<view class="type-cls" :class="j == 0 ? 'type-blue' : 'type-green'">
					<text class="font-size_36rpx color_FFFFFF font-weight">{{ i.title }}</text>
					<view>{{ i.detail }}</view>
					<text class="font-size_24rpx color_FFFFFF">立即查看 ></text>
					<image mode="heightFix" :src="i.img"></image>
				</view>
			</block>
		</view>
		<!-- 热门推荐 -->
		<view class="card-cls">
			<view class="hot-title-cls">热门推荐</view>
			<view class="display-fw-a">
				<block v-for="(i, j) in hotList" :key="j">
					<view class="flex-column hot-cls">
						<image :src="i.img"></image>
						<view>{{ i.text }}</view>
					</view>
				</block>
			</view>
		</view>
		
		<!-- 剪辑 -->
		<block v-for="(i,j) in clipList" :key="j">
		<view class="card-cls">
			<view class="clip-title">{{i.title}}</view>
			<view class="display-a">
				<view class="sunui-flex-column clip-num-cls">
					<text>任务数(个)</text>
					<view>{{i.tackNum}}</view>
				</view>
				<view class="sunui-flex-column clip-num-cls m-left100">
					<text>成片数(个)</text>
					<view>{{i.pieceNum}}</view>
				</view>
			</view>
		</view>
		</block>
	</view>
</template>

<script>
export default {
	data() {
		return {
			typeList: [
				{
					title: '素材中心',
					detail: '海量素材，批量管理',
					img: '/static/cloud/create-type1.png'
				},
				{
					title: '任务管理',
					detail: '海量素材，批量管理',
					img: '/static/cloud/create-type2.png'
				}
			],
			// 热门推荐
			hotList: [
				{
					img: '/static/cloud/hot1.png',
					text: 'AI剪辑'
				},
				{
					img: '/static/cloud/hot2.png',
					text: '口播剪辑'
				},
				{
					img: '/static/cloud/hot3.png',
					text: '图文剪辑'
				},
				{
					img: '/static/cloud/hot4.png',
					text: '数字人剪辑'
				},
				{
					img: '/static/cloud/hot5.png',
					text: '长视频创作'
				},
				{
					img: '/static/cloud/hot6.png',
					text: '成片库'
				}
			],
			// 剪辑list
			clipList:[
				{
					title:'AI剪辑',
					tackNum:500,
					pieceNum:300
				},
				{
					title:'口播剪辑',
					tackNum:500,
					pieceNum:300
				},
				{
					title:'图文剪辑',
					tackNum:500,
					pieceNum:300
				},
				{
					title:'长视频创作',
					tackNum:500,
					pieceNum:300
				},
			]
		};
	},
	methods: {}
};
</script>

<style lang="less">
.create-center-page {
	.header-img {
		width: 100%;
		height: 290rpx;
	}
	.admin-cls {
		margin: 20rpx 20rpx 30rpx;

		.type-blue {
			background: linear-gradient(108deg, #1862fe 0%, #55a3fb 88.62%);
		}
		.type-green {
			background: linear-gradient(107deg, #30b48c 12.31%, #69d8b1 100%);
		}
		// 素材中心/任务管理
		.type-cls {
			padding: 24rpx 20rpx;
			position: relative;
			width: calc(100% / 2 - 5px);
			height: 212rpx;
			border-radius: 20rpx;
			view {
				color: #fff;
				font-size: 26rpx;
				padding: 14rpx 0 38rpx;
			}
			image {
				max-width: 130rpx;
				height: 113rpx;
				position: absolute;
				bottom: 0;
				right: 0;
			}
		}
	}
	// 卡片样式
	.card-cls {
		margin: 0rpx 24rpx 30rpx;
		padding: 24rpx 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}

	/* 热门推荐start */
	.hot-title-cls {
		padding: 0rpx 20rpx 30rpx;
		font-size: 32rpx;
	}
	.hot-cls {
		width: calc(100% / 4);
		padding: 22rpx 0 24rpx;
		image {
			width: 70rpx;
			height: 70rpx;
			margin-bottom: 6rpx;
		}
		view {
			color: #333;
			font-size: 26rpx;
		}
	}
	/* 热门推荐end */

	/* 剪辑卡片 start */
	.clip-title{
		padding: 18rpx 20rpx;
		margin: 0 8rpx;
		color: #333;
		font-weight: bold;
		font-size: 28rpx;
		border-bottom: 2rpx solid #F2F2F2;
	}
	.m-left100{
		margin-left: 100rpx;
	}
	.clip-num-cls {
		padding: 26rpx 44rpx 18rpx;
		text {
			color: #898989;
			font-size: 24rpx;
		}
		view {
			color: #000;
			font-size: 48rpx;
			font-weight: bold;
			margin-top: 8rpx;
		}
	}
	/* 剪辑卡片 end */
}
</style>
